<template>
  <div>
    <el-card class="box-card">
      <!-- 头 -->
      <div slot="header" class="clearfix">
        <span>
          <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>内容管理</el-breadcrumb-item>
          </el-breadcrumb> -->
          <my-bread>内容管理</my-bread>
        </span>
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px" size="small">
        <el-form-item label="状态"
          ><el-radio-group v-model="form.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group></el-form-item
        >
        <el-form-item label="频道">
          <!-- 封装 -->
          <!-- <my-channel :value="form.channel_id" @input="form.channel_id=$event"></my-channel> -->
          <my-channel v-model="form.channel_id" ></my-channel>
          <!-- {{ form.channel_id }} -->
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            @change="changeDate"
            v-model="dataRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          {{ dataRange }}
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="filterArticle">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 卡片 -->
    <el-card class="box-card" style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>根据筛选条件共查询到 {{ total }} 条结果：</span>
      </div>
      <!-- 表格 -->
      <el-table :data="articles" style="width: 100%">
        <el-table-column label="封面" width="180">
          <template slot-scope="scope">
            <!-- {{scope.row.cover.images[0]}} -->
            <!-- <img :src="scope.row.cover.images[0]" alt=""> -->
            <el-image
              :src="scope.row.cover.images[0]"
              style="width:180px height:150px"
            >
              <div slot="error" class="image-slot">
                <!-- <i class="el-icon-picture-outline"></i> -->
                <img
                  src="@/assets/image/error.gif"
                  alt=""
                  width="180px"
                  height="150px"
                />
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="400px">
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.status === 0">草稿</el-tag>
            <el-tag v-if="scope.row.status === 1">待审核</el-tag>
            <el-tag type="success" v-if="scope.row.status === 2"
              >审核通过</el-tag
            >
            <el-tag type="warning" v-if="scope.row.status === 3"
              >审核失败</el-tag
            >
            <el-tag type="danger" v-if="scope.row.status === 4">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              plain
              @click="editArticle(scope.row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="deleteArticle(scope.row.id)"
              circle
              plain
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="form.per_page"
        :current-page="form.page"
        style="margin-top: 20px"
        @current-change="changePage"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
// import MyBread from "@/components/my-bread.vue";
export default {
  data () {
    return {
      dataRange: [],
      total: 0,
      form: {
        status: null,
        channel_id: null,
        begin_pubdate: null,
        end_pubdate: null,
        page: 1,
        per_page: 20
      },

      articles: []
    }
  },
  methods: {
    deleteArticle (id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await this.$http.delete('/mp/v1_0/articles/' + id)
          this.getArticles()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {})
    },
    editArticle (id) {
      this.$router.push('article?id=' + id)
    },

    changeDate (changedDate) {
      // console.log(changedDate);
      if (changedDate) {
        this.form.begin_pubdate = changedDate[0]
        this.form.end_pubdate = changedDate[1]
        console.log(this.form)
      } else {
        this.form.begin_pubdate = this.form.end_pubdate = null
      }
    },
    filterArticle () {
      console.log(123)
      this.form.page = 1
      this.getArticles()
    },
    changePage (changedPage) {
      // console.log(changedPage);
      this.form.page = changedPage
      this.getArticles()
    },

    async getArticles () {
      try {
        const {
          data: { data }
        } = await this.$http.get('/mp/v1_0/articles', {
          params: this.form
        })
        // console.log(data.results);
        console.log(data)
        this.total = data.total_count
        this.articles = data.results
      } catch {
        (err) => console.log(err.response.data.meaasge)
      }
    }
  },
  created () {
    // this.getChannel_id();
    this.getArticles()
  }
}
</script>

<style>
</style>
